<template>
  <div class="article-list-container">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 
            loading===是否显示加载  ?
            finished==加载结束了，不会再开启上拉或者下拉组件了
            load======初次进入就会执行   初始化函数
            refreshing==是否显示下拉加载  下拉加载的状态效果 属性  
            onLoad====上拉触底就触发   
         -->
      ===={{ loading }}
      <van-list
        v-model="loading"
        :finished="finished"
        offset="50"
        finished-text="我是有底线的。。。。"
        @load="onLoad"
      >
        <!-- van-cell组件 -->
        <article-item :articleList='articleList'></article-item>
        <!-- van-cell组件 -->
      </van-list>
    </van-pull-refresh>
    <!-- 上拉加载组件 -->
  </div>
</template>

<script>
import { channelsArticlesApi } from "@/api";

import  articleItem  from  '@/components/article-item.vue'
export default {
  props: {
    //  获取传过来的id   没传就去默认值  为推荐的id为0
    channel: {
      type: Object,
      default: () => {
        //
        return {
          id: 0,
          name: "推荐"
        };
      }
    }
  },
  data() {
    return {
      // 上拉加载下拉刷新
      list: [],
      loading: false,
      finished: false,
      refreshing: false,

      //   article: {
      //     channel_id: 0, //  推荐
      //     timestamp: Date.now(),
      //     with_top: 1,
      //   },

      articleList: [],

      timestamp: null
    };
  },
  name: "",
  created() {},
  methods: {
    // 获取文章列表
    async getArticleData() {
      const { data: res } = await channelsArticlesApi({
        channel_id: this.channel.id, //  推荐
        timestamp: this.timestamp || Date.now(),
        with_top: 1
      });
      console.log(res, 44455);
      //  一定需要叠加 不然始终都会触底  就导致onLoad一直触发
      this.articleList = [...this.articleList, ...res.data.results];

      //  获取数据成功后就结束加载状态效果
      this.loading = false;
      //  判断是否关闭上拉组件   finished=====没有数据了就设置finished=true  上拉组件就不会再触发了
      if (res.data.results.length) {
        // 表示还可以获取之前的数据  pre_timestamp
        this.timestamp = res.data.pre_timestamp;

         
      } else {
       this.finished = true; //关闭上拉加载组件
      }
    },

    // 上拉加载  loading   finished
    onLoad() {
      console.log(123321);
      //  初次进入就会立刻执行    初始化的函数
      //  获取文章列表
      this.getArticleData();
    },
    //  下拉    refreshing
    async onRefresh() {
      console.log(4444);
      /* 
        什么时候触发：只要一下拉就触发
        + 就发请求获取最新的数据    根据当前的时间戳
        + 只要下拉 就显示加载过程，获取数据成功后就关闭加载过程    loading
   //     */
      // this.onLoad();
      const { data: res } = await channelsArticlesApi({
        channel_id: this.channel.id, //  推荐
        timestamp: Date.now(),
        with_top: 1
      });
      console.log(res, 44455);
      //  一定需要叠加 不然始终都会触底  就导致onLoad一直触发
      this.articleList = res.data.results;

      this.refreshing = false; ///  不设置就会持续显示下拉加载效果
    }
  },

  components:{
    articleItem
  }
};
</script>
<style scoped lang="less">
.article-list-container {
  .bar {
    width: 100%;
    .van-tabs {
      .hangb {
        position: fixed;
        right: 0;
      }

      /deep/.van-tabs__wrap--scrollable .van-tabs__nav--complete {
        align-items: center;
      }
    }
  }
}
</style>
